<template>
  <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="info-wrapper">
            <ul class="cards">
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg8">
                    <img src="../../assets/logo/logo1111.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">货区10</span>
                    <span class="card_title" data-v-78ca3db0="">货区名称</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg1">
                    <img src="../../assets/logo/reports-icon1.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">1000</span><span class="card_title" data-v-78ca3db0="">货区总数</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg2">
                    <img src="../../assets/logo/reports-icon2.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">已用货区</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg3">
                    <img src="../../assets/logo/reports-icon3.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">空置货区</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg4">
                    <img src="../../assets/logo/reports-icon4.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">货物种类</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg5">
                    <img src="../../assets/logo/reports-icon5.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">1</span><span class="card_title" data-v-78ca3db0="">主要货物</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg6">
                    <img src="../../assets/logo/reports-icon6.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">1</span><span class="card_title" data-v-78ca3db0="">待检货物</span>
                  </div>
                </div>
              </li>
              <li class="card">

                <div class="fbet">
                  <div class="card_icon card_icon_bg7">
                    <img src="../../assets/logo/reports-icon7.png" alt="">
                  </div>
                  <div>
                    <span class="card_number">0</span><span class="card_title" data-v-78ca3db0="">环境温度</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>
</template>

<script>
export default {};
</script>

<style scoped>
/* 移除所有ul和ol列表的小黑点 */
ul,
ol {
  list-style: none;
}

.info-wrapper {
  margin: 5px;
}

.cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0px;
  width: 100%;
  flex-wrap: nowrap; /* 防止换行 */
  overflow-x: auto;
}

.cards .card {
  position: relative;
  cursor: pointer;
  width: 185px;
  height: 85px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
  flex-shrink: 0; /* 防止卡片缩小 */
}

.fbet {
  display: flex;
  justify-content: space-between;
}

.cards .card_icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-top: 8px;
  border-radius: 20px;
}

.cards .card_icon img {
  width: 36px;
  height: 36px;
}

.cards .card_icon_bg1 {
  background: rgb(233, 235, 255);
}

.cards .card_icon_bg2 {
  background: #ffe6e0;
}

.cards .card_icon_bg3 {
  background: #e6fbf2;
}

.cards .card_icon_bg4 {
  background: #fff4ee;
}

.cards .card_icon_bg5 {
  background: #e6fbf2;
}

.cards .card_icon_bg6 {
  background: #e9ebff;
  border-radius: 20px;
}

.cards .card_icon_bg7 {
  background: #dbedff;
}

.cards .card_icon_bg8 {
  background: #f5f5f5;
}

.cards .card_icon_bg9 {
  background: #e6fbf2;
}

.cards .card_number {
  text-align: left;
  color: rgb(51, 51, 51);
  display: block;
  line-height: 45px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
}

.cards .card_title {
  text-align: left;
  display: block;
  color: rgb(102, 102, 102);
  font-family: "Microsoft YaHei";
  font-size: 14px;
}
</style>
